<template>
	<view>
		<view class="jiaonang" :style="{ height: navHeight + 'px' }">
			<view class="jiaonang-box" :style="{ height: navObj + 'px', paddingTop:  navTop + 'px', paddingRight: (navObjWid+5)+ 'px' }">
				<view class="jiaonang-box-item" :class="active==index?'jiaonang-box-active':''" v-for="(item, index) in arr" :key="index" @tap="titleClick(item,index)">{{item}}</view>
				<view class="jiaonang-box-line" :style="{left: (active*60+ 20) + 'px'}"></view>
			</view>
		</view>
		<scroll-view  :style="{paddingTop:navHeight + 10 +'px'}" scroll-y="true" class="content" v-if="dataList.length!=0"  @scrolltolower="scrolltolower">
			<view v-for="(data,index) in dataList" :key="index" class="card" @tap="goDetail(data)">
				<view
					style="padding:0rpx 0rpx 20rpx 0rpx;font-size: 32rpx;display: flex;align-items: center;justify-content: flex-start;">
					<view style="border-radius: 32rpx;overflow:hidden;width:64rpx;height: 64rpx;margin-right: 20rpx;">
						<image :src="data['shopLogo']" style="width:64rpx;height: 64rpx;" />
					</view>
					<view>
						{{data['shopName']}}
					</view>
				</view>
				<view style="height: 2rpx;background-color: #EAECEF;"></view>
				<view style="margin-top: 10px;display: flex;justify-content: flex-start;">
					<view>
						<image :src="data['servicePic']" style="border-radius: 10px;width: 120px;height: 120px; margin-right: 20rpx;" />
					</view>
					<view
						style="flex-grow: 1;display: flex;flex-direction: column;justify-content: space-between;max-width: 200px;">
						<view
							style="width: 100%;color:#34495E;font-size: 32rpx;font-weight: 700;white-space: nowrap;text-overflow:ellipsis;overflow: hidden;">
							{{data['serviceName']}}
						</view>
						<view style="white-space: nowrap;text-overflow:ellipsis;overflow: hidden;"  v-if="tagIndex<=2">
							<view
								style="display: inline-block; margin-top: 5px;margin-right: 4rpx;padding: 4rpx 6rpx 4rpx 6rpx;border:1px solid #EAECEF;border-radius: 32rpx;display: inline-block;font-weight: 400;font-size: 24rpx;color:#8292A2"
								v-for="(tag,tagIndex) in data['serviceTag']" :key="tagIndex">
								{{tag}}
							</view>
						</view>
						<view style="font-weight: 400;font-size: 24rpx;color:#8292A2;margin-top: 5px;">
							<view>订阅时间:{{data["createTime"]}}</view>
						</view>
						<view style="text-align: right;margin-top: 10px;">
							<view
								style="display: inline-block; font-size: 28rpx;font-weight: 700;color:red;padding:10rpx 10rpx 10rpx 10rpx;border: 1px solid red;border-radius: 32rpx;"
								@click.stop="cancel(data)">取消订阅</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="isLoaded == 2" class="no-data">没有更多数据了</view>
		</scroll-view>
		<view v-if="dataList.length==0"  :style="{paddingTop:navHeight + 10 +'px'}">
			<view class="no-service-foot">
				<view class="no-service-foot-content">
					<view class="foot-text">
						<view style="color:#2E4964;font-size: 16px;font-weight: 700;">未订阅膳食服务</view>
						<view style="color:#8292A2;font-size: 14px;font-weight: 700;margin-top: 5px;">去订阅适宜身体需求的膳食方案吧。
						</view>
					</view>
					<view class="foot-button" @click="goFind()">去订阅</view>
				</view>
			</view>
		</view>
		<mytabbar :active="3" :count="0"></mytabbar>
	</view>
</template>

<script>
	import mytabbar from '../../components/my-tabbar/index.vue';
	import myheader from '../../components/header/index.vue';
	export default {
		components: {
			mytabbar,
			myheader
		},
		data() {
			return {
				searchData: {
					"page": 1,
					"pageSize": 5
				},
				dataList: [],
				isLoaded: 1,
				navHeight: '',
				navTop: '',
				navObj: '',
				navObjWid: '',
				arr: ['全部','咨询', '订阅', '商品'],
				active: 0
			}
		},
		mounted() {
			  const systemInfo = uni.getSystemInfoSync();
			  let menuButtonObject = wx.getMenuButtonBoundingClientRect();
			  let statusBarHeight = systemInfo.statusBarHeight
			  let navTop = menuButtonObject.top
			  let navObjWid = systemInfo.windowWidth - menuButtonObject.right + menuButtonObject.width // 胶囊按钮与右侧的距离 = windowWidth - right+胶囊宽度
			  let navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
			  this.navHeight = navHeight; //导航栏总体高度
			  this.navTop = navTop; //胶囊距离顶部距离
			  this.navObj = menuButtonObject.height; //胶囊高度
			  this.navObjWid = navObjWid; //胶囊宽度(包括右边距离)
	    },
		onShow() {
			this.isLoaded = 1
			this.dataList = []
			this.searchData.page = 1
			this.getDataList();
		},
		onShareAppMessage(res) {
		
		return {
			title: '好友分享了吃巧【吃巧Ai营养师】',
			path: '/pages/index/index',
			imageUrl: "https://www.chideqiao.com/api/images/myhm-static/share_1.png"

		};
},
		methods: {
			titleClick(item, index) {
				this.active = index 
				// 请求数据
			},
			scrolltolower() {
				if (this.isLoaded == 1) {
					this.searchData.page++
					this.getDataList('add')
				}
			},
			getDataList(flag) {
				uni.showLoading({
					title: '正在加载...',
					mask: true
				}); // 显示加载提示
				let postData = {
					"page": this.searchData.page,
					"pageSize": this.searchData.pageSize
				}
				this.$H.post("portal/sub/searchsubs", postData).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						let data = res.data.data;
						if (!data || data.length < this.searchData.pageSize) {
							this.isLoaded = 2
						}
						if (data != null) {
							if(flag) {
								for (let i = 0; i < data.length; i++) {
									this.dataList.push({
										"id": data[i].id,
										"shopLogo": data[i].logoUrl,
										"shopName": data[i].storeName,
										"servicePic": data[i].mainPic,
										"serviceName": data[i].serviceName,
										"serviceId": data[i].serviceId,
										"serviceTag": data[i].menus.split(","),
										"createTime": data[i].createTime
									});
								}
							} else {
								this.dataList = []
								for (let i = 0; i < data.length; i++) {
									this.dataList.push({
										"id": data[i].id,
										"shopLogo": data[i].logoUrl,
										"shopName": data[i].storeName,
										"servicePic": data[i].mainPic,
										"serviceName": data[i].serviceName,
										"serviceId": data[i].serviceId,
										"serviceTag": data[i].menus.split(","),
										"createTime": data[i].createTime
									});
								}
							}
						} else {
							this.dataList = []
						}
						this.$forceUpdate();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				});
			},
			cancel(service) {
				let that = this
				uni.showModal({
					content: '确定要取消订阅吗',
					confirmColor: "#E02828",
					success: function (res) {
						if (res.confirm) {
							uni.showLoading({
								title: '取消中',
								mask: true
							})
							that.trueCancel(service)
						} else if (res.cancel) {
							return false;
						}
					},
				});
				
			},
			trueCancel(service) {
				this.$H.delete("portal/sub/cancelSub?subId=" + service.id).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						uni.showToast({
							title: "取消成功",
							icon: "none"
						})
						this.searchData.page = 1
						this.getDataList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			goDetail(data) {
				uni.navigateTo({
					url: "/pages/service/serviceDetail?serviceId=" + data.serviceId
				});
			},
			goFind(){
				uni.switchTab({
					url: "/pages/find/index"
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jiaonang {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #fff;
		&-box {
			display: flex;
			position: relative;
			align-items: center;
			&-item {
				text-align: center;
				width: 60px;
				font-size: 16px;
				color: rgba(42, 83, 124, 1);
				font-weight: 500;
			}
			&-active {
				color: #1ABC9C;
				font-weight: bold;
			}
			&-line {
				position: absolute;
				bottom: 0;
				height: 3px;
				width: 20px;
				background: rgba(0, 188, 141, 1);
				transition: all .3s;
				border-radius: 4px;
			}
		}
	}
	.no-data {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		justify-content: center;
		height: 96rpx;
		line-height: 96rpx;
		width:100%;
		color: #cbd1d8;
	}
	.content {
		padding: 0rpx 20rpx 200rpx;
		width: calc(100% - 40rpx);
		height: 100vh;
	}

	.card {
		background-color: white;
		border-radius: 10rpx;
		margin-bottom: 10px;
		padding: 20rpx 20rpx 20rpx 20rpx;
		border-radius: 10px;
	}

	.no-service-foot {
		position: absolute;
		bottom: 95px;
		padding: 0rpx 10px 0rpx 10px;
		height: 82px;
		width: 100%;
		box-sizing: border-box;

		.no-service-foot-content {
			background-color: white;
			border-radius: 5px;
			color: red;
			height: 100%;
			padding: 0px 20px 0px 20px;
			font-size: 14px;
			text-align: center;
			vertical-align: middle;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 50px;

			.foot-text {
				display: inline-flex;
				justify-content: flex-start;
				flex-direction: column;
				align-items: flex-start;
			}

			.foot-button {
				cursor: pointer;
				color: #FFFFFF;
				padding: 10px;
				background-color: #1ABC9C;
				border-radius: 5px;
				font-size: 14px;
				font-weight: 700;
				border-radius: 30px;
			}
		}
	}
</style>